<template>
  <div class="t-bread-crumb">
    <template v-for="(item, index) in props.data" :key="index">
      <div class="t-bread-crumb-item-label">{{ item[props.config.label] }}</div>
      <div v-if="props.data.length > (index + 1)" class="t-bread-crumb-item-scp">＞</div>
    </template>
  </div>
</template>

<script setup name="TcBreadCrumb">
const props = defineProps({
  data: {
    type: Array,
    default() {
      return [];
    }
  },
  config: {
    type: Object,
    default() {
      return {
        label: 'borLabel'
      };
    }
  }
});
</script>

<style lang="scss" scoped>
.t-bread-crumb {
  display: flex;
  align-items: center;

  > div {
    margin-right: 10px;
  }

  > div:last-child {
    margin-right: 0;
  }

  &-item-label {
    font-size: 18px;
    line-height: 0;
  }

  &-item-scp {
    font-weight: 700;
    font-size: 24px;
    line-height: 0;
  }
}
</style>

